<template>
	<view class="other">
		<!-- 轮播图 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="1000" circular class="swiper">
			<swiper-item v-for="url in banner" class="swiper-item"><image :src="url" mode=""></image></swiper-item>
		</swiper>
		<div class="title">{{ showObj.category.name }}</div>
		<div class="title">{{ showObj.category.frontName }}</div>
		<!-- 两排商品 -->
		<view class="good">
			<view class="item" v-for="(good, index) in goods" :key="good.id" @click="godetail(good)">
				<image :src="good.primaryPicUrl" mode=""></image>
				<text>{{ good.name }}</text>
				<text>{{ good.counterPrice }}</text>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	props: ['curId'],
	computed: {
		...mapState({
			otherData: state => state.home.otherData
		}),
		showObj() {
			let obj = this.otherData.find(item => this.curId == item.category.parentId);
			return obj;
		},
		banner() {
			return (this.showObj.category || {}).bannerUrlList || [];
		},
		goods() {
			return this.showObj.itemList || [];
		},
	},
		methods: {
			godetail(good) {
				uni.navigateTo({
					url: '/pages/detail/detail?good=' + JSON.stringify(good)
				});
			}
		}
};
</script>

<style lang="stylus" scoped>
.other
	width 750rpx
	.swiper
		width 750rpx
		height 350rpx
		.swiper-item
			width 750rpx
			height 350rpx
			image
				width 750rpx
				height 350rpx
	.title
		text-align center
	.good
		width 750rpx
		display flex
		flex-wrap wrap
		.item
			width 375rpx
			display flex
			flex-direction column
			padding 20rpx
			box-sizing border-box
			image
				width 344rpx
				height 344rpx
</style>
